<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <script src="../jQuery/jquery-1.12.4.min%20(2).js"></script>
    <style>
        div{
            border: 1px solid gray;
            margin-top: 2px;
            width: 200px;
            text-align: center;
        }
        li{
            width: 100px;
        }
    </style>
    <script>
        jQuery(function($) {
            $('#btneq').click(function () {
                $("div").eq(1).css({backgroundColor: "#ff0011" })
                }
            );
            $('#btnf').click(function () {
                    $("li").first().css({backgroundColor: "#ff0011" })
                }
            );
            $('#btnl').click(function () {
                    $("li").last().css({backgroundColor: "#ff0011" })
                }
            );
            $('#btnn').click(function () {
                    $("p").next().css({backgroundColor: "#ff0011" })
                }
            );

        });
    </script>
</head>
<fieldset>
    <legend>筛选</legend>
    <p>jQuery提供了强大的选择器让我们获取对象。将jQuery选择器分为两大部分：选择对象和筛选条件。<br/>选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象</p>
    <p>下面主要写了</p>
    <hr style="border: 1px dashed gray;" />
    <span class="redb">eq</span>　<span class="f-w">获取第N个元素(给地标)</span>
    <p class="f-w">示例：</p>
    <div>div0</div>
    <div>div1</div>
    <p class="f-w">运行效果：</p>
    <button id="btneq">运行</button>　　<span class="g">(通过eq筛选 给它加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>
    <pre>
        <span class="f-w">html代码：</span>
        &lt;div&gt;div0&lt;/div&gt;
        &lt;div&gt;div1&lt;/div&gt;

        <span class="f-w">jQ代码：</span>
        $('#btneq').click(function () {
        <span class="red">$("div").eq(1)</span>.css({backgroundColor: "#ff0011" })
                }
            );
    </pre>

    <hr style="border: 1px dashed gray;" />
    <span class="redb">first 与 last</span>　<span class="f-w">first获取第第一个元素,last获取最后一个元素</span>
    <p class="f-w">示例：</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p class="f-w">运行效果：</p>
    <button id="btnf" style="width: 100px;">运行 first</button>　<span class="g">(通过first筛选 给第一个元素加上了一个背景色)</span> <br/>
    <button id="btnl" style="width: 100px;">运行 last</button>　<span class="g">(通过last筛选 给最后一个元素加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>
    <pre>
        <span class="f-w">html代码：</span>
        &lt;ul&gt;
            &lt;li&gt;1&lt;/li&gt;
            &lt;li&gt;2&lt;/li&gt;
            &lt;li&gt;3&lt;/li&gt;
            &lt;li&gt;4&lt;/li&gt;
        &lt;/ul&gt;

        <span class="f-w">jQ代码：</span>
        $('#btnf').click(function () {
                 <span class="red">$("li").first()</span>.css({backgroundColor: "#ff0011" })
                }
            );
        $('#btnl').click(function () {
                 <span class="red">$("li").last()</span>.css({backgroundColor: "#ff0011" })
                }
            );
    </pre>

    <hr style="border: 1px dashed gray;" />
    <span class="redb">hasClass</span>　<span class="f-w">检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。</span>
    <p class="f-w">示例：</p>
    <div>div0</div>
    <div>div1</div>
    <p class="f-w">运行效果：</p>
    <button id="btnhas">运行</button>　　<span class="g">(通过eq筛选 给它加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>
    <pre>
        <span class="f-w">html代码：</span>
        &lt;div&gt;div0&lt;/div&gt;
        &lt;div&gt;div1&lt;/div&gt;

        <span class="f-w">jQ代码：</span>
        $('#btneq').click(function () {
        <span class="red">$("div").eq(1)</span>.css({backgroundColor: "#ff0011" })
                }
            );
    </pre>

    <hr style="border: 1px dashed gray;" />
    <span class="redb">next</span>　<span class="f-w">取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。</span>
    <p class="f-w">示例：</p>
    <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
    <p class="f-w">运行效果：</p>
    <button id="btnn">运行</button>　　<span class="g">(通过eq筛选 给它加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>
    <pre>
        <span class="f-w">html代码：</span>
        &lt;div&gt;div0&lt;/div&gt;
        &lt;div&gt;div1&lt;/div&gt;

        <span class="f-w">jQ代码：</span>
        $('#btneq').click(function () {
        <span class="red">$("div").eq(1)</span>.css({backgroundColor: "#ff0011" })
                }
            );
    </pre>
</fieldset>
<body>
筛选
eq
first
last
hasClass
next
prev
parent
childen
siblings
contents
</body>
</html>